import {
  Checkbox,
  CheckboxGroup,
  Col,
  Form,
  FormItem,
  Input,
  Radio,
  RadioGroup,
  Row,
  Select,
  SelectOption,
  Space
} from 'ant-design-vue'
import { defineComponent, PropType, ref } from 'vue'

import { GetCouponListTypeRes } from '@/apis/commonTypes'

import { ConditionSettingItem } from '../../../types'
import styles from './index.module.css'

const { useForm } = Form

export default defineComponent({
  name: 'ConditionFrom',
  props: {
    formData: {
      type: Object as PropType<ConditionSettingItem>,
      required: true
    },
    couponListOption: {
      type: Array as PropType<GetCouponListTypeRes>,
      required: true
    }
  },
  emits: ['handleConCumRadioChange', 'handleConDeaRadioChange'],
  setup(props, { emit }) {
    const rulesRef = ref({} as FormRules)
    const { validate, validateInfos } = useForm(props.formData, rulesRef)
    const dayOrPersonRadioOptions = ref([
      {
        label: '每天(每人每天参加的次数)',
        value: 0
      },
      {
        label: '每人(每个人只能参加的次数)',
        value: 1
      }
    ])
    function handleConCumRadioChange() {
      emit('handleConCumRadioChange')
    }
    function handleConDeaRadioChange() {
      emit('handleConDeaRadioChange')
    }
    function submit() {
      if (!props.formData.openTimes) return Promise.reject('请输入翻牌基础次数')
      if (!intergerNumber(props.formData.openTimes)) {
        return Promise.reject('请输入正整数')
      }
      if (props.formData.defaultPrizeType !== 0) {
        if (!props.formData.defaultPrizeInfo)
          return Promise.reject('请输入默认奖项内容')
      }
      if (props.formData.checkboxes.indexOf(1) > -1) {
        if (!props.formData.browseSeconds) {
          return Promise.reject('请输入浏览小程序秒数')
        }
        if (!intergerNumber(props.formData.browseSeconds)) {
          return Promise.reject('请输入正整数')
        }
        if (!props.formData.browseGiveNum) {
          return Promise.reject('请输入赠送翻牌机会')
        }
        if (!intergerNumber(props.formData.browseGiveNum)) {
          return Promise.reject('请输入正整数')
        }
        if (!props.formData.browseLimitNum) {
          return Promise.reject('请输入上限次数')
        }
        if (!intergerNumber(props.formData.browseLimitNum)) {
          return Promise.reject('请输入正整数')
        }
      }
      if (props.formData.checkboxes.indexOf(2) > -1) {
        if (!props.formData.invitationTimes) {
          return Promise.reject('请输入邀请好友数量')
        }
        if (!intergerNumber(props.formData.invitationTimes)) {
          return Promise.reject('请输入正整数')
        }
        if (!props.formData.invitationGiveNum) {
          return Promise.reject('请输入赠送翻牌机会')
        }
        if (!intergerNumber(props.formData.invitationGiveNum)) {
          return Promise.reject('请输入正整数')
        }
        if (!props.formData.invitationLimitNum) {
          return Promise.reject('请输入上限次数')
        }
        if (!intergerNumber(props.formData.invitationLimitNum)) {
          return Promise.reject('请输入正整数')
        }
      }
      if (props.formData.checkboxes.indexOf(3) > -1) {
        if (!props.formData.watchSeconds) {
          return Promise.reject('请输入观看视频秒数')
        }
        if (!intergerNumber(props.formData.watchSeconds)) {
          return Promise.reject('请输入正整数')
        }
        if (!props.formData.watchGiveNum) {
          return Promise.reject('请输入赠送翻牌机会')
        }
        if (!intergerNumber(props.formData.watchGiveNum)) {
          return Promise.reject('请输入正整数')
        }
        if (!props.formData.watchLimitNum) {
          return Promise.reject('请输入上限次数')
        }
        if (!intergerNumber(props.formData.watchLimitNum)) {
          return Promise.reject('请输入正整数')
        }
      }
      if (props.formData.checkboxes.indexOf(4) > -1) {
        if (!props.formData.shareGiveNum) {
          return Promise.reject('请输入赠送翻牌机会')
        }
        if (!intergerNumber(props.formData.shareGiveNum)) {
          return Promise.reject('请输入正整数')
        }
        if (!props.formData.shareLimitNum) {
          return Promise.reject('请输入上限次数')
        }
        if (!intergerNumber(props.formData.shareLimitNum)) {
          return Promise.reject('请输入正整数')
        }
      }
      if (props.formData.checkboxes.indexOf(5) > -1) {
        if (!props.formData.perfectInformationGiveNum) {
          return Promise.reject('请输入赠送翻牌机会')
        }
        if (!intergerNumber(props.formData.perfectInformationGiveNum)) {
          return Promise.reject('请输入正整数')
        }
      }
      if (props.formData.checkboxes.indexOf(6) > -1) {
        if (!props.formData.cumulativeOpenNum) {
          return Promise.reject('请输入累计翻牌次数')
        }
        if (!intergerNumber(props.formData.cumulativeOpenNum)) {
          return Promise.reject('请输入正整数')
        }
        if (
          props.formData.cumulativeOpenGiveType !== '' &&
          !props.formData.cumulativeOpenGiveInfo
        ) {
          return Promise.reject('请输入额外赠送信息')
        }
      }
      if (!props.formData.maxTimes) {
        return Promise.reject('请输入最大中奖次数')
      }
      if (!intergerNumber(props.formData.maxTimes)) {
        return Promise.reject('请输入正整数')
      }
      return Promise.resolve()
    }
    function intergerNumber(value) {
      if (isNaN(Number(value)) || !Number.isInteger(Number(value))) {
        return false
      } else {
        return true
      }
    }
    return {
      validateInfos,
      dayOrPersonRadioOptions,
      validate,
      submit,
      handleConCumRadioChange,
      handleConDeaRadioChange
    }
  },
  render() {
    return (
      <div class={styles.wrap}>
        <Form>
          <FormItem label="翻牌基础次数">
            <Space>
              <Input
                placeholder="请输入基础翻牌次数"
                style={{
                  width: '200px'
                }}
                v-model:value={this.formData.openTimes}
                v-slots={{
                  suffix: () => <span>次</span>
                }}
              />
              <RadioGroup
                v-model:options={this.dayOrPersonRadioOptions}
                v-model:value={this.formData.openTimesType}
              />
            </Space>
          </FormItem>
          <FormItem>
            <CheckboxGroup v-model:value={this.formData.checkboxes}>
              <Row gutter={[0, 10]}>
                <Col span={24}>
                  <Checkbox value={1} />
                  浏览小程序
                  <Input
                    v-model:value={this.formData.browseSeconds}
                    class={styles.numInput}
                    size={'small'}
                  />
                  秒，赠送
                  <Input
                    v-model:value={this.formData.browseGiveNum}
                    class={styles.numInput}
                    size={'small'}
                  />
                  次翻牌机会，上限
                  <Input
                    v-model:value={this.formData.browseLimitNum}
                    class={styles.numInput}
                    size={'small'}
                  />
                  次，
                  <RadioGroup
                    v-model:options={this.dayOrPersonRadioOptions}
                    v-model:value={this.formData.browseType}
                  />
                </Col>
                <Col span={24}>
                  <Checkbox value={2} />
                  每邀请
                  <Input
                    v-model:value={this.formData.invitationTimes}
                    class={styles.numInput}
                    size={'small'}
                  />
                  个好友，赠送
                  <Input
                    v-model:value={this.formData.invitationGiveNum}
                    class={styles.numInput}
                    size={'small'}
                  />
                  次翻牌机会，上限
                  <Input
                    v-model:value={this.formData.invitationLimitNum}
                    class={styles.numInput}
                    size={'small'}
                  />
                  次，
                  <RadioGroup
                    v-model:options={this.dayOrPersonRadioOptions}
                    v-model:value={this.formData.invitationType}
                  />
                </Col>
                <Col span={24}>
                  <Checkbox value={3} />
                  观看视频
                  <Input
                    v-model:value={this.formData.watchSeconds}
                    class={styles.numInput}
                    size={'small'}
                  />
                  秒，赠送
                  <Input
                    v-model:value={this.formData.watchGiveNum}
                    class={styles.numInput}
                    size={'small'}
                  />
                  次翻牌机会，上限
                  <Input
                    v-model:value={this.formData.watchLimitNum}
                    class={styles.numInput}
                    size={'small'}
                  />
                  次，
                  <RadioGroup
                    v-model:options={this.dayOrPersonRadioOptions}
                    v-model:value={this.formData.watchType}
                  />
                </Col>
                <Col span={24}>
                  <Checkbox value={4} />
                  分享视频,赠送
                  <Input
                    v-model:value={this.formData.shareGiveNum}
                    class={styles.numInput}
                    size={'small'}
                  />
                  次翻牌机会，上限
                  <Input
                    v-model:value={this.formData.shareLimitNum}
                    class={styles.numInput}
                    size={'small'}
                  />
                  次，
                  <RadioGroup
                    v-model:options={this.dayOrPersonRadioOptions}
                    v-model:value={this.formData.shareType}
                  />
                </Col>
                <Col span={24}>
                  <Checkbox value={5} />
                  完善个人信息，赠送
                  <Input
                    v-model:value={this.formData.perfectInformationGiveNum}
                    class={styles.numInput}
                    size={'small'}
                  />
                  次翻牌机会，
                </Col>
                <Col span={24}>
                  <Checkbox value={6} />
                  累计翻牌
                  <Input
                    v-model:value={this.formData.cumulativeOpenNum}
                    class={styles.numInput}
                    size={'small'}
                  />
                  次，额外赠送
                  <RadioGroup
                    v-model:value={this.formData.cumulativeOpenGiveType}
                    onChange={this.handleConCumRadioChange}
                    style={{
                      marginRight: '45px',
                      marginLeft: '5px',
                      verticalAlign: 'top'
                    }}
                  >
                    <Radio value={0} style={{ display: 'block' }}>
                      积分
                      {this.formData.cumulativeOpenGiveType === 0 ? (
                        <Input
                          placeholder="请输入积分"
                          v-model:value={this.formData.cumulativeOpenGiveInfo}
                          class={styles.radioInput}
                        />
                      ) : null}
                    </Radio>
                    <Radio value={1} style={{ display: 'block' }}>
                      翻牌次数
                      {this.formData.cumulativeOpenGiveType === 1 ? (
                        <Input
                          v-model:value={this.formData.cumulativeOpenGiveInfo}
                          placeholder="请输入翻牌次数"
                          class={styles.radioInput}
                        />
                      ) : null}
                    </Radio>
                    <Radio value={2} style={{ display: 'block' }}>
                      卡卷
                    </Radio>
                    {this.formData.cumulativeOpenGiveType === 2 ? (
                      <Select
                        v-model:value={this.formData.cumulativeOpenGiveInfo}
                        placeholder="请选择"
                        class={styles.radioInput}
                        style={{
                          marginLeft: '24px'
                        }}
                      >
                        {this.couponListOption.map(v => (
                          <SelectOption value={v.id}>{v.name}</SelectOption>
                        ))}
                      </Select>
                    ) : null}
                  </RadioGroup>
                  <RadioGroup
                    v-model:options={this.dayOrPersonRadioOptions}
                    v-model:value={this.formData.cumulativeOpenType}
                  />
                </Col>
              </Row>
            </CheckboxGroup>
          </FormItem>
          <FormItem label="默认奖项">
            <RadioGroup
              v-model:value={this.formData.defaultPrizeType}
              onChange={this.handleConDeaRadioChange}
            >
              <Radio value={0}>空</Radio>
              <Radio value={1} style={{ display: 'block' }}>
                积分
                {this.formData.defaultPrizeType === 1 ? (
                  <Input
                    v-model:value={this.formData.defaultPrizeInfo}
                    placeholder="请输入积分"
                    style={{ marginLeft: '10px' }}
                  />
                ) : null}
              </Radio>
              <Radio value={2} style={{ display: 'block' }}>
                翻牌次数
                {this.formData.defaultPrizeType === 2 ? (
                  <Input
                    v-model:value={this.formData.defaultPrizeInfo}
                    placeholder="请输入翻牌次数"
                    style={{ marginLeft: '10px' }}
                  />
                ) : null}
              </Radio>
              <Radio value={3} style={{ display: 'block' }}>
                卡卷
              </Radio>
              {this.formData.defaultPrizeType === 3 ? (
                <Select
                  v-model:value={this.formData.defaultPrizeInfo}
                  placeholder="请选择卡卷"
                  class={styles.radioInput}
                  style={{
                    marginLeft: '24px'
                  }}
                >
                  {this.couponListOption.map(v => (
                    <SelectOption value={v.id}>{v.name}</SelectOption>
                  ))}
                </Select>
              ) : null}
            </RadioGroup>
          </FormItem>
          <FormItem label="最大中奖次数">
            <Space>
              <Input
                placeholder="请输入最大中奖次数"
                style={{
                  width: '200px'
                }}
                v-model:value={this.formData.maxTimes}
                v-slots={{
                  suffix: () => <span>次</span>
                }}
              />
              <RadioGroup
                v-model:options={this.dayOrPersonRadioOptions}
                v-model:value={this.formData.maxTimesType}
              />
            </Space>
          </FormItem>
        </Form>
      </div>
    )
  }
})
